<template>
  <view class="container">
    <view class="couponsBox">
      <van-tabs v-model="active" @change="getChange">
        <van-tab title="待使用">
          <view class="couponsBox_content">
            <view class="couponsBox_content_item" v-for="(item,i) in awardList1" :key="i"
              @click="awardDetails(item.id)">
              <view class="couponsBox_content_item_left">
                <view class="item_left_title">
                  <text>{{item.couponType == 0?'抵扣券':'现金卷'}}</text>
                  <h1>{{item.couponName}}</h1>
                </view>
                <view class="item_left_conent">
                  <text>{{item.startTime}} &nbsp;~ &nbsp;{{item.endTime}}</text>
                  <text>仅限茂业天地店使用</text>
                </view>
              </view>
              <view class="couponsBox_content_item_right">
                <h1>¥<text>{{item.cash}}</text></h1>
                <text>满{{item.conditionAmount}}使用</text>
              </view>
            </view>
          </view>
        </van-tab>

        <van-tab title="已过期">
          <view class="couponsBox_content">
            <view class="couponsBox_content_item" v-for="(item,i) in awardList2" :key="i"
              @click="awardDetails(item.id)">
              <view class="couponsBox_content_item_left">
                <image src="/static/images/circle-activities/guoqi.png" mode="aspectFill"></image>
              </view>
              <view class="couponsBox_content_item_right">
                <h1 style="color: rgba(61, 61, 61, .5) ;">{{item.couponName}}</h1>
                <text>已过期</text>
              </view>
            </view>
          </view>
        </van-tab>
      </van-tabs>
    </view>
    <!-- 门票详情 -->
    <van-popup :show="ticketsShow" @close="this.ticketsShow= false" overlay-style="opacity:.2" round closeable
      close-icon-position="top-left" position="bottom" custom-style="height: 90%">
      <view class="ticketsBox">

        <view class="ticketsBox_title">
          奖励池
        </view>


        <scroll-view scroll-y="true" style="height: 900rpx;">
          <image v-if="awardDetailsList.status == 0" class="ticketsBox_image"
            src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210630/cf3e96e5fbe73fe2725df8a7ba42f0d8.png" mode="widthFix">
          </image>
          <image v-else-if="awardDetailsList.status == 2" class="ticketsBox_image"
            src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210630/05469dd113d4c0d29a42fb012f397209.png" mode="widthFix"></image>

          <view class="ticketsBox_content">
            <view class="ticketsBox_content_top">
              <image v-if="awardDetailsList.status == 0" src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210630/15a140d09ab7631dc6dd471e88feb524.jpg" mode="aspectFill"></image>
              <text v-else-if="awardDetailsList.status == 1">已使用</text>
              <text v-else-if="awardDetailsList.status == 2">奖励已过期</text>
              <h1>{{awardDetailsList.couponName}}</h1>
            </view>
            <view class="ticketsBox_content_bottom">
              <!-- <view class="ticketsBox_content_bottom_item">
                <view class="item_top">
                  <image src="../../static/decorate.png" mode="widthFix"></image>
                  <h1>使用条件</h1>
                </view>
                <view class="item_bottom">
                  {{awardDetailsList.remark}}
                </view>
              </view> -->
              <view class="ticketsBox_content_bottom_item">
                <view class="item_top">
                  <image src="../../static/decorate.png" mode="widthFix"></image>
                  <h1>有效期限</h1>
                </view>
                <view class="item_bottom">
                  {{awardDetailsList.startTime}}  ~  {{awardDetailsList.endTime}}
                </view>
              </view>
              <view class="ticketsBox_content_bottom_item">
                <view class="item_top">
                  <image src="../../static/decorate.png" mode="widthFix"></image>
                  <h1>使用说明</h1>
                </view>
                <view class="item_bottom item_bottom_finally">
                  <text>券类型：{{awardDetailsList.couponType==0? '折扣卷':'现金卷'}}</text>
                  <text>详细规则：{{awardDetailsList.remark}}</text>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </van-popup>
  </view>
</template>

<script>
  import {
    getCoupons,
    getCoupon
  } from '@/api/activity_particulars.js'

  export default {
    data() {
      return {
        ticketsShow: false,
        active: 0,
        current: 1,
        awardList1: [],
        awardList2: [],
        residueTime: '',
        status: 0,
        curTab: 0,
        awardDetailsList: [],
      };
    },
    onLoad() {
      this.getawardList()
    },
    methods: {

      getawardList() {
        const CouponsQuery = {
          current: this.current,
          size: 20,
          status: this.status
        }

        getCoupons(CouponsQuery).then(res => {

          res.data.records.forEach(item => {
            console.log(item)
            // 时间剩余
            // var time1 = item.endTime
            // var repTime1 = time1.replace(/-/g, '/');
            // var timeTamp1 = Date.parse(repTime1);
            // var time2 = item.startTime
            // var repTime2 = time2.replace(/-/g, '/');
            // var timeTamp2 = Date.parse(repTime2);
            // item.endTime = timeTamp1 - timeTamp2
            // console.log(item.endTime)
            // item.conditionAmount.toFixed(2)
            item.conditionAmount= item.conditionAmount.substr(0,2)
          })
          if (this.curTab == 0) {
            this.awardList1 = res.data.records
          } else if (this.curTab == 2) {
            this.awardList2 = res.data.records
          }
        })
      },
      // 时间天数
      formatDuring(mss) {
        var days = parseInt(mss / (1000 * 60 * 60 * 24));
        var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = (mss % (1000 * 60)) / 1000;
        if (days) {
          return days + "天"
        } else if (hours) {
          return hours + "小时"
        } else {
          return minutes + "分钟"
        }
      },
      getChange(e) {
        this.curTab = e.detail.index
        if (this.curTab == 0) {
          this.status = 0
          this.getawardList()
        } else {
          this.status = 2
          this.getawardList()
        }
      },
      // 奖励详情
      awardDetails(id) {
        this.ticketsShow = true
        getCoupon(id).then(res => {
          this.awardDetailsList = res.data
        })

      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: rgba(245, 245, 245, 1);
  }

  ::-webkit-scrollbar {
    display: none;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
  }

  .couponsBox {
    width: 100%;

    /deep/.van-tab {
      color: rgba(61, 61, 61, .5);
    }

    /deep/.van-tabs__line {
      width: 50rpx !important;
      left: 70rpx !important;
      // transform: translateX(160rpx) !important;
      background-color: rgba(253, 211, 56, 1);
    }

    /deep/.van-tab--active {

      font-weight: 600;
      color: rgba(61, 61, 61, 1);
    }

    .couponsBox_content {
      width: 100%;
      padding: 0 30rpx;
      padding-top: 32rpx;

      .couponsBox_content_item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 690rpx;
        height: 206rpx;
        box-sizing: border-box;
        padding: 0 42rpx;
        border-radius: 20rpx;
        background-color: rgba(255, 255, 255, 1);
        margin-bottom: 32rpx;

        .couponsBox_content_item_left {

          .item_left_title {
            display: flex;

            h1 {
              margin-left: 20rpx;
              font-size: 30rpx;
              color: rgba(61, 61, 61, 1);
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            text {
              width: 84rpx;
              height: 36rpx;
              background-color: rgba(253, 211, 56, 1);
              border-radius: 5rpx;
              text-align: center;
              line-height: 36rpx;
              font-size: 24rpx;
              color: rgba(51, 51, 51, 1);
            }
          }

          .item_left_conent {
            display: flex;
            flex-direction: column;
            margin-top: 10rpx;

            text {
              margin-top: 10rpx;
              font-size: 24rpx;
              color: rgba(61, 61, 61, .5);
            }
          }
        }

        .couponsBox_content_item_right {

          // display: flex;
          h1 {
            font-size: 24rpx;
            color: rgba(61, 61, 61, 1);
            font-weight: 600;
            letter-spacing: 10rpx;

            text {
              font-size: 72rpx !important;
              color: rgba(61, 61, 61, 1) !important;
            }
          }

          text {
            font-size: 24rpx;
            color: rgba(61, 61, 61, .5);
          }
        }
      }
    }
  }

  .ticketsBox {
    padding: 0 30rpx;

    .color {
      color: rgba(61, 61, 61, .5) !important;
    }

    .ticketsBox_title {
      display: flex;
      justify-content: center;
      margin-top: 40rpx;
      font-size: 30rpx;
      color: rgba(61, 61, 61, 1);
      margin-bottom: 40rpx;
    }

    .ticketsBox_image {
      width: 488rpx;
      height: 250rpx;
      position: absolute;
      left: 40rpx;
      top: -30rpx;
    }

    .ticketsBox_content {
      position: absolute;
      top: 180rpx;
      left: 50%;
      transform: translate(-50%);
      width: 690rpx;
      height: 1035rpx;
      padding: 0 40rpx;
      padding-bottom: 200rpx;
      box-sizing: border-box;
      border: 2rpx solid rgba(0, 0, 0, 0.15);
      background-color: #fff;
      border-radius: 20rpx;

      .ticketsBox_content_top {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 20rpx;
        margin-top: 70rpx;
        margin-bottom: 20rpx;
        box-sizing: border-box;

        image {
          width: 279rpx;
          height: 279rpx;
        }

        h1 {
          font-size: 30rpx;
          color: rgba(61, 61, 61, 1);
          margin-top: 40rpx;
          text-align: center;
        }

        text {
          height: 279rpx;
          line-height: 297rpx;
          color: rgba(61, 61, 61, .5);
          font-size: 36rpx;
        }
      }

      .ticketsBox_content_bottom {
        .ticketsBox_content_bottom_item {
          margin: 40rpx 0;

          .item_top {
            display: flex;
            align-items: center;
            margin-bottom: 20rpx;

            image {
              width: 16rpx;
              height: 16rpx;
              margin-right: 15rpx;
            }

            h1 {
              font-size: 30rpx;
              color: rgba(61, 61, 61, 1);
            }
          }

          .item_bottom {
            color: rgba(61, 61, 61, 1);
            font-size: 24rpx;
            margin-left: 30rpx;
          }

          .item_bottom_finally {
            text {
              display: flex;
              flex-direction: column;
              line-height: 1.5;
              margin: 20rpx 0;
            }
          }
        }
      }
    }
  }
</style>
